<template>
    <div class="margin-top-sm">
        <div class="solid-bottom cu-form-group">
            <div class="title">门店ID</div>
            <input class="" disabled v-model="storeMain.storeId"/>
        </div>
        <div class="solid-bottom cu-form-group">
            <div class="title">门店名称</div>
            <input class="" disabled v-model="storeMain.name"/>
        </div>
        <div class="solid-bottom cu-form-group">
            <div class="title">联系电话</div>
            <input class="" disabled v-model="storeMain.tel"/>
        </div>
        <div class="solid-bottom cu-form-group">
            <div class="title">门店地址</div>
            <input class="" disabled v-model="storeMain.address"/>
        </div>
        <div class="solid-bottom cu-form-group">
            <div class="title">超级管理员</div>
            <input class="" disabled v-model="storeMain.userId"/>
        </div>
    </div>
    <div class="padding flex flex-direction">
        <button class="cu-btn bg-red lg" @tap="showModal=true">解除绑定</button>
    </div>
    <div :class="'cu-modal bottom-modal '+ (showModal?'show':'')">
        <div class="cu-dialog">
            <div class="cu-bar bg-white">
                <div class="action text-lg"
                     @tap="()=>{
                         showModal=false
                         isUnbind=false
                     }">
                    取消
                </div>
                <div v-if="!isUnbind" class="action text-red text-xl" @tap="isUnbind=true">确定</div>
                <div v-if="isUnbind" class="action text-green text-xl" @tap="unbind">确定</div>
            </div>
            <div v-if="!isUnbind" class="padding-xl text-orange text-lg">
                确定解绑微信吗
            </div>
            <div v-if="isUnbind">
                <div class="text-lg margin-xl padding-xl text-left">
                    <div class="flex" >
                        <div class="title flex-sub">验证码:</div>
                            <input class="flex-sub text-left bg-gray" v-model="userMain.mailCode"/>
                            <button v-if="isSend" class="cu-btn sm bg-green shadow flex-sub text-left margin-left round" disabled>{{ countdownTime }}s</button>
                            <button v-else class="cu-btn sm bg-green shadow flex-sub text-left margin-left round " @click="sendMail">验证码</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import request from "../../utils/request";

export default {
    name: "index",
    data() {
        return {
            userMain:uni.getStorageSync("userMain"),
            storeMain: uni.getStorageSync("currentStoreMain"),
            isSend: false,
            countdownTime:0,
            showModal:false,
            isUnbind:false,

        }
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: '门店信息'
        });

    },
    methods: {
        unbind() {
            request.post("/store/loginUser",this.userMain).then(res=>{
                if(res.code!==8){
                    this.userMain.openId=""
                    request.post("/store/update/bindOpenId",this.userMain).then(res=>{
                        console.log(this.userMain)
                        uni.clearStorageSync()
                        this.showModal=false
                        uni.reLaunch({
                            url: '/pages/login/index'
                        })
                    })

                }else {
                    uni.showToast({
                        title: "验证码有误",
                        icon: "error",
                        duration: 1500
                    })
                }
            })
        },
        sendMail(){
            request.post("/store/sendCommonMail", this.userMain).then(res => {
                if (res.code === 200) {
                    this.isSend = true
                    this.countdownTime = 60
                    uni.showToast({
                        title: "已向绑定邮箱发送验证码",
                        icon: "none",
                        duration: 2000
                    })
                    let timer = setInterval(() => {
                        this.countdownTime--;
                        if (this.countdownTime < 1) {
                            clearInterval(timer)
                            this.countdownTime = 0
                            this.isSend = false
                        }
                    }, 1000)
                }
            })
        }
    }
}
</script>

<style scoped>
.cu-form-group .title {
    min-width: calc(4em + 30px);
}
</style>